import React, { useEffect } from 'react'
// import { initDplayer } from '../../utils/util'
import { useSearchParams } from 'react-router-dom'
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'

export function VideoPlayer () {
  const [searchParams] = useSearchParams()
  useEffect(() => {
    const query = Object.fromEntries(searchParams.entries())
    // const dp = initDplayer(document.querySelector('#dplayer'), `/video/${query.p}.mp4`)
    // const dp = initDplayer(document.querySelector('#dplayer'), `http://github.itchenliang.club/storage/aaa/aaa.m3u8`)
    // dp.speed(2)

    // 参考: https://v2.h5player.bytedance.com/config/
    const player = new Player({
      el: document.querySelector('#dplayer'),
      url: `/video/${query.p}.mp4`,
      // 播放器尺寸大小
      height: '100%',
      width: '100%',
      // 是否启用流式布局，启用流式布局时根据width、height计算播放器宽高比，若width和height不是Number类型，默认使用16:9比例// 菜单控件
      // fluid: true,
      // 自适应视频内容宽高
      fitVideoSize: 'auto',
      // 音量大小
      volume: 1,
      // 是否启用自动播放
      autoplay: false,
      // 是否循环播放
      loop: false,
      // 是否初始化显示视频首帧
      // 播放器默认不会初始化视频，如果需要在没有设置poster的情况下显示视频首帧，可通过设置videoInit配置项实现。
      videoInit: true,
      // 封面图
      // poster: '//abc.com/**/*.png',
      // 播放倍速可选列表
      playbackRate: [0.5, 0.75, 1, 1.5, 2],
      // 默认播放速度
      defaultPlaybackRate: 2,
      // 播放倍速单位:可选'x'或'X'
      playbackRateUnit: 'x',
      // 设置视频起播时间
      // lastPlayTime: 20, // 视频起播时间（单位：秒）
      // lastPlayTimeHideDelay: 5, // 提示文字展示时长（单位：秒）
      // 样式横屏全屏：移动端时默认横屏
      rotateFullscreen: true,
      // 视频跳转播放下一集，需提供视频资源列表
      // playNext: {
      //   urlList: [
      //     'url1',
      //     'url2',
      //     'url3'
      //   ],
      // },
      // 视频下载控件，点击后下载视频
      download: true,
      // 弹幕: danmu
      // 截图功能支持用户对当前视频播放窗口进行即时截屏
      screenShot: {
        saveImg: true, // 是否下载截图
        quality: 0.92, // 截图质量
        type: 'image/png', // 图片格式
        format: '.png' // 下载截图后缀名
      },
      // 支持在进度条上标出重要的位置
      // progressDot: [
      //   {
      //     time: 10, //展示标记的时间
      //     text: '标记文字', //鼠标hover在标记时展示的文字
      //     duration: 8, //标记段长度（以时长计算）
      //     style: { //标记样式
      //       background: 'blue'
      //     }
      //   },
      //   {
      //     time: 22,
      //     text: '标记文字'
      //   },
      //   {
      //     time: 56,
      //     duration: 8,
      //   },
      //   {
      //     time: 76,
      //   }
      // ],
      // 自定义错误提示
      errorTips: `请<span>刷新</span>试试`,
      // 清晰度切换配置
      // definitionActive: 'click',
      // player.emit('resourceReady', [{name: '高清', url: 'url1'}, {name: '超清', url: 'url2'}]);
      // 禁用内置控件
      // ignores: ['replay'],
      // 使移动端支持双击暂停/播放
      enableVideoDbltouch: true,
      // 是否启用内联播放模式
      playsinline: true,
    })
    // 监听是否播放结束
    player.on('ended', () => {
    })
    // 监听是否播放
    player.on('play', () => {
    })
  }, [searchParams])

  return (
    <div className='player-video'>
      <div id="dplayer"></div>
    </div>
  )
}

export default VideoPlayer